<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="uft-8">
    <title>最佳实践</title>
    <link rel="stylesheet" href="layout.css">
</head>
<body>
<a href="javrascript:popUp('http://www.example.com');">Example</a>
<a href="#" onclick="popUp('http://www.exaple.com'); return false;">Example</a>
<a href="http://www.example.com" onclick="popUp('http://www.example.com'); return false;">Example</a>
<a href="http://www.example.com" onclick="popUp(this.getAttribute('href')); return false">Example</a>
<a href="http://www.example.com" onclick="popUp(this.href); return false;">Example</a>
<p style="font-weight: bold;color: red;">Be careful!</p>
<p class="warning">Be careful!</p>
<a href="http://www.example.com" class="popup">Example</a>
<script>
    function gracefulDegradation() {
        function popUp(url) {
            window.open(url, 'popup', 'width=320, height=480, title="new window"');
        }
    }

    function separateJavaScript() {
        function bindEvent() {
            var links = document.getElementsByTabName('a');
            for (var i = 0; i < links.length; i++) {
                if (links[i].getAttribute('class') == 'popup') {
                    links[i].onclick = function () {
                        popUp(this.getAttribute('href'));
                        return false;
                    }
                }
            }
        }

        function bindOnload() {
            onload = prepareLinks;

            function prepareLinks() {
                var links = document.getElementsByTabName('a');
                for (var i = 0; i < links.length; i++) {
                    if (links[i].getAttribute('class') == 'popup') {
                        links[i].onclick = function () {
                            popUp(this.getAttribute('href'));
                            return false;
                        }
                    }
                }
            }
        }
    }

    function backwardCompatibility() {
        function objectDetection() {
            if (method) {
                // statements
            }

            if (!method) {
                return false;
            }

            if (!getElementById) {
                return false;
            }

            if (!getElementById || !getElementsByTagName) {
                return false;
            }

            onload = function () {
                if (!document.getElementsByName) {
                    return false;
                }
                var links = document.getElementsByTabName('a');
                for (var i = 0; i < links.length; i++) {
                    if (links[i].getAttribute('class') == 'popup') {
                        links[i].onclick = function () {
                            popUp(this.getAttribute('href'));
                            return false;
                        }
                    }
                }
            }
        }
    }

    function considerPerformance() {
        function bad() {
            if (document.getElementsByName('a').length > 0) {
                var links = document.getElementsByName('a');
                for (var i = 0; i < links.length; i++) {
                    // 对每个链接做点处理
                }
            }
        }

        function good() {
            var links = document.getElementsByName('a');
            if (links.length > 0) {
                for (var i = 0; i < links.length; i++) {
                    // 对每个链接做点处理
                }
            }
        }
    }

    function compressScript() {
        function showPic(whichpic) {
            var source = whichpic.getAttribute('href');
            var placeholder = document.getElementById('placeholder');
            placeholder.setAttribute('src', source);
            var text = whichpic.getAttribute('title');
            var description = document.getElementById('description');
            description.firstChild.nodeValue = text;
        }
    }
</script>
<script src="function.js"></script>
</body>
</html>